/* eslint-disable no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/function-component-definition */
import React, {useEffect, useMemo, useState} from 'react'
import {Space, Button, Popconfirm,message} from 'antd'
import {history} from 'umi'
import {PlusOutlined} from '@ant-design/icons'
import {AddVehicleInfoModal} from './AddVehicleInfoModal'

import {PageType} from '../constant'

import Styles from './index.less'
import {getCommodityData} from '@/service/merchantCenter/channelRule'
import CustomTable from '@/components/Table'

export default (props: any) => {
	const {pageType, fleetId, selectedRow, setSelectedRow, rederT, basicsForm} =
		props
	const [loading, setLoading] = useState(false)
	const [total, setTotal] = useState(0)
	const [dataList, setDataList] = useState<any[]>([])
	const [searchValue, setSearchValue] = useState({})
	const [addModalVisivle, setAddModalVisivle] = useState(false)
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const orgId = useMemo(
		() => (history as any)?.location?.query.orgId,
		[history],
	)

	const getData = async (datas?: any) => {
		setLoading(true)
		const obj = {
			ids: selectedRow.join(','),
			...params,
			...datas,
		}
		const data = await getCommodityData(obj).catch(() => setLoading(true))
		if (data.code === 0) {
			setDataList(data.data.list)
			setTotal(data.data.total)
		}
		setLoading(false)
	}

	useEffect(() => {
		if (pageType && selectedRow.length && rederT) {
			getData()
		}
	}, [rederT])

	const onDelete = async (id: any) => {
		const newIds = selectedRow.filter((item: any) => item !== Number(id))
		setSelectedRow(newIds)
		getData({ids: newIds.join(',') || ''})
	}
	const getColnums: any[] = [
		{
			title: '商品方案ID',
			dataIndex: 'commodityNo',
			align: 'center',
			width: 150,
		},
		{
			title: '商品方案名称',
			dataIndex: 'commodityName',
			align: 'center',
			width: 150,
		},
		{
			title: '品牌/车系/车型 ',
			dataIndex: 'brandInfo',
			align: 'center',
			width: 150,
		},
		{title: '星级', dataIndex: 'carStar', align: 'center', width: 100},
		{
			title: '订单类型',
			dataIndex: 'rentTypeName',
			align: 'center',
			width: 150,
		},
		{
			title: '定金',
			dataIndex: 'depositAmount',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 120,
		},
		{
			title: '押金',
			dataIndex: 'mortgageAmount',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 120,
		},
		{
			title: '租期',
			dataIndex: 'leaseTerm',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 120,
		},
		{
			title: '月租金-新签',
			dataIndex: 'rentAmount',
			align: 'center',
			width: 150,
		},
		{
			title: '月租金-续签',
			dataIndex: 'renewRentAmount',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 150,
		},
		{
			title: '首付款',
			dataIndex: 'advancePaymentAmount',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 100,
		},
		{
			title: '尾款',
			dataIndex: 'balancePaymentAmount',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 100,
		},
		{
			title: '状态',
			dataIndex: 'auditStatus',
			align: 'center',
			render: (text: any) => <>{text === -1 ? '0' : text}</>,
			width: 100,
		},
		{
			title: '操作',
			dataIndex: 'operation',
			align: 'center',
			width: 200,
			render: (_: string, record: Record<string, string>) => (
				<Space size={12}>
					<Popconfirm
						placement="topLeft"
						title="确定要将该关联删除吗？"
						onConfirm={() => onDelete(record.id)}
						okText="确定"
						cancelText="取消"
						disabled={
							pageType === 'detail' || pageType === 'audit'
						}>
						<Button
							type="link"
							disabled={
								pageType === 'detail' || pageType === 'audit'
							}>
							删除
						</Button>
					</Popconfirm>
				</Space>
			),
		},
	]

	useEffect(() => {
		if (!fleetId) return
		getData({})
	}, [fleetId])

	return (
		<div className={Styles.basics}>
			<div className={Styles.titleBox} style={{display: 'flex'}}>
				<p style={{paddingRight: '20px'}}>关联商品方案</p>
				{pageType !== PageType.Detail && (
					<div className={Styles.btnList}>
						<Button
							icon={<PlusOutlined />}
							type="primary"
							ghost
							size="small"
							onClick={() => {
								const data = basicsForm.getFieldsValue()
								if(data?.cityId){
									setAddModalVisivle(true)
								}else{
									message.error('请先选择城市')
								}
								
							}}
							disabled={
								pageType === 'detail' || pageType === 'audit'
							}>
							新增
						</Button>
					</div>
				)}
			</div>
			<div className={Styles.formBox}>
				<div className={Styles.content}>
					<CustomTable
						params={params}
						columns={getColnums}
						total={total}
						pagination
						callback={(paginations: any) => {
							setParams(paginations)
						}}
						loading={loading}
						dataSource={dataList}
					/>
				</div>
				<AddVehicleInfoModal
					addModalVisivle={addModalVisivle}
					selectedRow={selectedRow}
					setSelectedRow={setSelectedRow}
					setAddModalVisivle={setAddModalVisivle}
					fleetRecord={{id: '222'}}
					basicsForm={basicsForm}
					callBack={() => {
						getData({...searchValue})
					}}
					// idArr={dataList.map((item) => item.carId)}
				/>
			</div>
		</div>
	)
}
